<template>
	<div class="app-container">
		<el-form ref="baseform" :model="form" label-position="right" :rules="rules" label-width="120px">
			<el-form-item prop="mailCategory" label="类型">
				<el-radio-group disabled v-model="form.mailCategory">
					<el-radio v-for="item in mail_category" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item prop="recipientIdList" label="收件人">
				<div style="display: flex">
					<div style="margin-right: 10px" v-for="item in form.recipientIdList" :key="item.recipientUserId">
						{{ item.recipientUserName }}({{ item.inboxStatus == '2' ? `未读` : '已读' }})
					</div>
				</div>
			</el-form-item>
			<div class="row-header">文件下载</div>
			<div class="info-url" v-for="item in form.mailUrlList" :key="item" @click="downloadFile(item)">
				<el-icon style="position: relative; top: 3px"><Link /></el-icon>&nbsp;{{ item }}
			</div>
			<el-form-item prop="mailTitle" label="邮件标题">
				<el-input disabled v-model="form.mailTitle" style="width: 50%" placeholder="请输入邮件标题" />
			</el-form-item>
			<el-form-item prop="mailContent" label="内容">
				<div v-html="form.mailContent" />
			</el-form-item>
		</el-form>
		<div style="line-height: 80px; height: 80px; padding-left: 100px">
			<el-button @click="reback">返回</el-button>
		</div>
	</div>
</template>
<script setup>
import { reactive } from 'vue'
const { proxy } = getCurrentInstance()
const { mail_category } = proxy.useDict('mail_category')
import { getDraftMail, getPersons } from '@/api/email/email'
import { useRoute } from 'vue-router'
import useTagsViewStore from '@/store/modules/tagsView'
import { download } from '@/utils/request'
const tagsView = useTagsViewStore()
const router = useRouter()
const baseform = ref()
const route = useRoute()

const form = reactive({
	mailId: '',
	mailCategory: '',
	recipientIdList: [],
	mailContent: '',
	mailStatus: '',
	mailTitle: '',
	mailUrlList: []
})
if (route.query.id) {
	getDraftMail({ mailId: route.query.id }).then((res) => {
		for (let item in form) {
			form[item] = res.data[item]
		}
		form.mailCategory += ''
		form.contactsStatus = ''
		form.recipientIdList = res.data['recipientList']
	})
}
const downloadFile = (file) => {
	download({ url: file }).then()
}
const rules = {
	mailCategory: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
	recipientIdList: [{ required: true, message: '收件人不能为空', trigger: 'blur' }],
	mailContent: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	mailTitle: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
	mailStatus: [{ required: true, message: '选项不能为空', trigger: 'blur' }]
}

const reback = () => {
	tagsView.delView(router.currentRoute.value)
	router.go(-1)
}
</script>
<style lang="scss" scoped>
.header {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	margin-bottom: 5px;
}
:deep(.is-active) {
	background-color: #409eff !important;
}
.row-header {
	font-weight: 600;
	height: 50px;
	line-height: 50px;
	border-bottom: 2px rgba(240, 240, 240, 1) solid;
	border-top: 2px rgba(240, 240, 240, 1) solid;
	margin-top: 10px;
}
.info-url {
	display: block;
	width: 100%;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	background-color: #3f9efe;
	color: #ffffff;
	margin: 5px 0;
	padding-left: 10px;
	cursor: pointer;
}
</style>
